<template>
  <div>
      <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-购物车</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>
    <div id="app">
    <myheader></myheader>

    <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
        <form method="get" action="/search.html" class="search_con fr mt40">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" name="" value="搜索">
        </form>
    </div>

    <div class="total_count">全部商品<em>{{total_count}}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <ul class="cart_list_td clearfix" v-for="(cart,index) in carts" :key="index">
        <li class="col01"><input type="checkbox" name="" v-model="cart.selected"></li>
        <li class="col02"><img :src="'http://127.0.0.1:8000/'+cart.goods.pic"></li>
        <li class="col03">{{ cart.goods.name }}</li>
        <li class="col05">{{ cart.goods.price }}元</li>
        <li class="col06">
            <div class="num_add">
                <a class="add fl" @click="add(index)">+</a>
                <input v-model="cart.num" type="text" class="num_show fl">
                <a  class="minus fl" @click="sub(index)">-</a>
            </div>
        </li>
        <li class="col07">{{cart.goods.price*cart.num}}元</li>
        <li class="col08"><a >删除</a></li>
    </ul>

    <ul class="settlements">
        <li class="col01"><input type="checkbox" name="" v-model="selected_all"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{total_selected_amount}}</em><br>共计<b>{{total_selected_count}}</b>件商品</li>
        <li class="col04"><a @click="go">去结算</a></li>
    </ul>

    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    </div>
</body>
  </div>
</template>

<script>
import myheader from '@/components/Header'

export default {
    data(){
        return {
            carts:[],
        }
    },
    methods:{
        go(){
            //结算跳转前，要先统一 更新我们选中哪些商品去结算，更新到我们的购物车，
            const token=sessionStorage.getItem("token")

            if(!token){
                alert("没有登录，请先去登录")
                //如果令牌不存在，证明我们没有登录 先去登录
                this.$router.push({"path":"/login","query":{"back":"/cart"}})
                return
            }
            //获取所有选中的购物车的id
            let cids=[]
            for(let i=0;i<this.carts.length;i++){
                    if(this.carts[i].selected){
                        cids.push(this.carts[i].id)
                    }
                 }
            // alert(cids)
            this.axios.put("/carts",{"cids":cids},{"headers":{"Authorization":token}}).then(resp=>{
                console.log(resp.data)
            })
        },
        add(index){
            this.carts[index].num+=1
            this.update_num(1,this.carts[index].id)
            
        },
        sub(index){
            this.carts[index].num-=1
            this.update_num(-1,this.carts[index].id)
        },
        update_num(num,cid){

            const token=sessionStorage.getItem("token")

            if(!token){
                alert("没有登录，请先去登录")
                //如果令牌不存在，证明我们没有登录 先去登录
                this.$router.push({"path":"/login","query":{"back":"/cart"}})
                return
            }

            this.axios.put("/carts",{"cid":cid,"num":num},{"headers":{"Authorization":token}}).then(resp=>{
                console.log(resp.data)
            })
        }
    },
	components:{
		myheader
    },
    created(){
        const token=sessionStorage.getItem("token")

        if(!token){
            alert("没有登录，请先去登录")
            //如果令牌不存在，证明我们没有登录 先去登录
            this.$router.push({"path":"/login","query":{"back":"/cart"}})
            return
        }

        this.axios.get("/carts",{"headers":{"Authorization":token}}).then(resp=>{
            console.log(resp.data)
            this.carts=resp.data
        }).catch(error=>{
            console.log(error)
        })
    },
    computed: {
        total_count(){
            let count=0
            for(let i=0;i<this.carts.length;i++){
                count+=this.carts[i].num
            }
            return count
        },
        total_selected_count(){
            //根据选中状态 来做计算
            let count=0
            for(let i=0;i<this.carts.length;i++){
                if(this.carts[i].selected){
                  count+=this.carts[i].num  
                }
            }
            return count
        },
        total_selected_amount(){
            let amount=0
            for(let i=0;i<this.carts.length;i++){
                if(this.carts[i].selected){
                  amount+=this.carts[i].num*this.carts[i].goods.price  
                }
            }
            return amount
        },
        selected_all:{
           get(){
                for(let i=0;i<this.carts.length;i++){
                    if(!this.carts[i].selected){
                        //表 有一个没有选中，不是全选
                    return 0  
                    }
                 }
                //如果for循环都执行完了 证明 都选中了
                return 1
           },
           set(val){
               //根据这个值，去遍历所有的其他复选框 然后设置成这样的值
               for(let i=0;i<this.carts.length;i++){
                if(val){
                  this.carts[i].selected=1
                }else{
                    this.carts[i].selected=0
                }
            }
           }
        }
        
    },
}
</script>

<style>

</style>